<template>
  <div class="mod_box">
    <el-row>
      <el-col style="text-align: center;">
        <el-input
          v-model.trim="searchMess"
          placeholder="输入信息进行查询"
          :style="'width:50%;margin:5px 0px;'"
          @keyup.enter.native="search"
        >
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="mod_title">
      <el-col :sm="4">
        <div class="g-title">可调剂车辆（{{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align: right;">
        <!-- <el-button type="primary" @click="add" size="small">新增</el-button>
        <el-button type="success" @click="edit" size="small">修改</el-button>-->
        <!-- <el-button type="danger" @click="del" size="small">删除</el-button> -->
        <!-- <el-button type="primary" @click="download" size="small">模板下载</el-button>
        <el-upload
          class="eluploadwrapper"
          :action="serverProjName+'/admin/yg//batchAddUser.do'"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          name="file"
          :with-credentials="true"
          :show-file-list="false"
          :data="uploadFileParams"
          accept=".xls, .xlsx"
        >
          <el-button type="primary" size="small">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="exportData" size="small">导出</el-button>-->
      </el-col>
    </el-row>

    <el-table :data="listData" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column fixed prop="index" label="序号" align="center"></el-table-column>
      <el-table-column fixed prop="tagName" label="车牌号" align="center"></el-table-column>
      <el-table-column fixed prop="parentName" label="所属单位" align="center"></el-table-column>
      <el-table-column fixed prop="propName" label="提交时间" align="center"></el-table-column>
      <el-table-column fixed prop="propName" label="操作" align="center"></el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.mod_box {
  padding: 20px;
}
.mod_title {
  padding: 20px 0;
  .g-title {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
    margin: 10px 0;
    display: inline-block;
  }
}
</style>
<script>
import { axios } from "@/api/axios";
export default {
  data: function() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      listData: [],
      listDataSelected: [], //选中数据
      dialogVisible: false
    };
  },
  methods: {
    fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      axios("admin/company/listJson.do", "get", {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        companyName: this.searchMess
      }).then(data => {
        this.listData = data.data;
        for (var i in this.listData) {
          this.listData[i].index =
            Number(i) + Number(this.pageSize * (this.pageNo - 1)) + 1;
        }
        this.total = data.total;
      });
    },
    search() {
      this.pageNo = 1;
      this.fetchData();
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected.splice(0);
      val.forEach(e => {
        this.listDataSelected.push(e);
      });
      console.log(this.listDataSelected);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>